<!-- 
  作者：于千荷,
  描述：考勤页面+打卡页面,
  修改人：于千荷
 -->

<template>
  <div>
    <div class="content">
      <span class="titleText"><h2>考勤详细情况</h2></span>
      <span class="down-icon" @click="backFixRsult"
        ><img src="@/assets/icon/down.png" style="width: 55px; height: 55px"
      /></span>
      <hr class="langHr" />
      <hr class="shortHr" />

      <div class="table">
        <ul>
          <li>日期:2016-05-03 00:01</li>
          <li>学号:199000001</li>
          <li>项目名称:在线商城系统</li>
          <li>实训老师:李老师</li>
          <li>责任老师:李老师</li>
          <li>考勤完成情况:完成</li>
          <el-row>
            考勤完成情况 :
            <el-cascader :options="options"
              class="w-50 m-2 inputtext"
              placeholder="修改考勤状态信息"
              style="width: 200px; margin-top: -4px; margin-left: 6px"
            />
          </el-row>
        </ul>
        <el-button color="#3e94ad" class="btn">提交修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { Search, Calendar } from "@element-plus/icons-vue";
import { reactive, toRefs } from "vue";
export default {
  name: "DetailsPage",
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();

    function backFixRsult() {
      context.emit("closeclick02", false);
    }
    const options = [
      {
        value: "consistency",
        label: "迟到",
      },
      {
        value: "feedback",
        label: "正常",
      },
      {
        value: "feedback02",
        label: "早退",
      },
    ];
    let data = reactive({
      complete: "",
    });
    return {
      Search,
      Calendar,
      options,
      backFixRsult,
      ...toRefs(data),
    };
  },
};
</script>

<style lang="less" scoped>
.header-input {
  width: 180px;
  margin-top: 40px;
  margin-left: 100px;
  padding-left: 20px;
  border: 1px #666 solid;
  border-radius: 30px;
  background-color: #c2dae2;
}

.content {
  position: relative;
  width: 800px;
  height: 480px;
  background-color: #e0eef2;
  margin: auto;
  margin-top: 50px;
  border-radius: 50px;
  .titleText {
    position: absolute;
    top: 20px;
    left: 40px;
    font-size: 20px;
    color: rgb(62, 148, 173);
  }
  .down-icon {
    position: absolute;
    top: 16px;
    right: 50px;
    cursor: pointer;
  }
  .langHr {
    position: absolute;
    height: 1px;
    width: 720px;
    left: 40px;
    top: 80px;
    z-index: 20;
    border: 1px solid rgb(194, 218, 226);
    background-color: rgb(194, 218, 226);
  }
  .shortHr {
    position: absolute;
    // height: 1px;
    // width:720px;
    left: 40px;
    top: 80px;
    z-index: 21;
    width: 200px;
    border: 4px solid rgb(62, 148, 173);
    margin-top: -3px;
    border-radius: 20px;
    background-color: rgb(62, 148, 173);
  }
  .table {
    position: absolute;
    width: 500px;
    height: 300px;
    color: #666;
    // border: #666 1px solid;
    top: 150px;
    left: 50%;
    transform: translate(-50%, 0);
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        // border: #666 1px solid;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 200px;
        height: 25px;
        margin-bottom: 10px;
      }
    }
    .btn {
      position: relative;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      margin: auto;
      width: 160px;
      height: 35px;
    }
  }
}
</style>